<template>
  <div>

    <div class="dashboard-container">
      <!-- 销售数量 -->
      <div class="dashbo-heard">
        <div style="display: flex;">
          <el-row :gutter="12">
            <el-col :span="8" style='width:570px' class="home-header">
              <el-card shadow="always">
                <div class="homeHeader">
                  <div>
                    <img width="100px" class="index-img" src="./../../assets/images/笔记本.png" alt="">
                  </div>
                  <div class="num-box">
                    <div class="num">
                      今天订单总数
                    </div>
                    <div style="margin-top:10px;">{{ orderInfo.orderNumToday == null ? '0' : orderInfo.orderNumToday }}
                    </div>
                  </div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="8" style='width:570px'>
              <el-card shadow="always">
                <div class="homeHeader">
                  <div>
                    <img width="100px" class="index-img" src="./../../assets/images/金额.png" alt="">
                  </div>
                  <div class="home-text num-box">
                    <div class="num">
                      今日销售总额
                    </div>
                    <div style="margin-top:10px;">{{ orderInfo.amountSumToday == null ? '0' : orderInfo.amountSumToday
                    }}
                    </div>
                  </div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="8" style='width:570px'>
              <el-card shadow="always">
                <div class="homeHeader">
                  <div>
                    <img width="100px" class="index-img" src="./../../assets/images/gold-金币-1.png" alt="">
                  </div>
                  <div class="num-box">
                    <div class="num">
                      昨日销售总额
                    </div>
                    <div style="margin-top:10px;">{{ orderInfo.amountSumYesterday == null ? '0'
                        : orderInfo.amountSumYesterday
                    }}</div>
                  </div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="8" style='width:570px'>
              <el-card shadow="always">
                <div class="homeHeader">
                  <div>
                    <img width="100px" class="index-img" src="./../../assets/images/交易.png" alt="">
                  </div>
                  <div class="num-box">
                    <div class="num">
                      近7天销售总额
                    </div>
                    <div style="margin-top: 10px; ">{{ orderInfo.amountSumWeek == null ? '0' : orderInfo.amountSumWeek }}
                    </div>
                  </div>
                </div>

              </el-card>
            </el-col>
          </el-row>

        </div>

      </div>

    </div>
    <!-- 待处理事务 -->
    <div style="height: 150px;">
      <div class="box-size">
        <div class="text-box" style="">待处理事务</div>
        <div style="display: flex; justify-content: space-between; ">
          <div style="display: flex; justify-content: space-between; margin: 20px 40px;">
            <div style="color: #777777">鱼苗投放工单</div>
            <div style="margin-left: 206px; color: red;">({{ pendingInfo.fryLaunchWorkNum }})</div>
          </div>


          <div style="display: flex; justify-content: space-between; margin: 20px 0;">
            <span style="color: #777777">发票工单</span>
            <span style="margin-left: 206px; color: red;">({{ pendingInfo.invoiceNum }})</span>

          </div>
          <div style="display: flex; justify-content: space-between; margin:20px  40px;">
            <span style="color: #777777">待付款订单</span>
            <span style="margin-left: 206px; color: red;">({{ pendingInfo.unPayOrderNum }})</span>

          </div>
        </div>

        <el-divider></el-divider>
      </div>


    </div>

    <!-- 运营快捷入口 -->
    <div style="height: 150px; margin-top: 100px; ">
      <div class="box-size">
        <div class="text-box">运营快捷入口</div>

        <div style="display: flex; text-align: center;">
          <div style="margin: 20px 40px;" @click="reservoirBtn">
            <div><img src="../../assets/images/添加.png" alt=""></div>
            <div style="margin-top:10px ; color: #999999;">添加水库</div>
          </div>
          <div style="margin: 20px 40px;" @click="orderBtn">
            <div><img src="../../assets/images/工单.png" alt=""></div>
            <div style="margin-top:10px ; color: #999999;">订单列表</div>
          </div>
          <div style="margin: 20px 40px;" @click="userBtn">
            <div><img src="../../assets/images/用户管理.png" alt=""></div>
            <div style="margin-top:10px ; color: #999999;">用户管理</div>
          </div>
          <div style="margin: 20px 40px;" @click="smartClick">
            <div><img src="../../assets/images/菊花.png" alt=""></div>
            <div style="margin-top:10px ; color: #999999;">智能渔方管理</div>
          </div>
          <div style="margin: 20px 40px;" @click="wokeClick">
            <div><img src="../../assets/images/工单 (1).png" alt=""></div>
            <div style="margin-top:10px ; color: #999999;">工单管理</div>
          </div>
          <!-- <div style="margin: 20px 40px;">
            <div><img src="../../assets/images/交易统计.png" alt=""></div>
            <div style="margin-top:10px ; color: #999999;">交易统计</div>
          </div> -->
          <div style="margin: 20px 40px;" @click="setClick">
            <div><img src="../../assets/images/205设置.png" alt=""></div>
            <div style="margin-top:10px ; color: #999999;">设置管理</div>
          </div>
        </div>
      </div>


    </div>

    <!-- 用户总览 -->
    <div style="height: 150px; margin-top: 100px; margin-bottom: 50px;">
      <div class="box-size">
        <div class="text-box">用户总览</div>

        <div style="display: flex; text-align: center;">
          <div style="margin: 20px 40px;">
            <div style="color: red; font-size: 30px;">{{ Statistics.incrNumToday == null ? '0' : Statistics.incrNumToday }}
            </div>
            <div style="margin-top:10px ;">今日新增</div>
          </div>
          <div style="margin: 20px 40px;">
            <div style="color: red; font-size: 30px;">{{ Statistics.incrNumYesterday == null ? '0' :
                Statistics.incrNumYesterday
            }}</div>
            <div style="margin-top:10px ;">昨日新增</div>
          </div>
          <div style="margin: 20px 40px;">
            <div style="color: red; font-size: 30px;">{{ Statistics.incrNumMouth == null ? '0' : Statistics.incrNumMouth }}
            </div>
            <div style="margin-top:10px ;">本月新增</div>
          </div>
          <div style="margin: 20px 40px;">
            <div style="color: red; font-size: 30px;">{{ Statistics.totalNum == null ? '0' : Statistics.totalNum }}</div>
            <div style="margin-top:10px ;">用户新增</div>
          </div>
        </div>
      </div>


    </div>
    <router-view></router-view>
  </div>

</template>
  
<script>
import { mapGetters } from 'vuex'
import { fishPartyOrderStatistics, pendingWorkStatistics, userStatistics } from '@/api/index'
export default {
  name: 'Dashboard',
  data() {
    return {
      orderInfo: {},    //用首页渔方订单统计数据
      pendingInfo: {},  //待处理事务数据
      Statistics: {},   //用户统计数据
    }

  },
  created() {
    // 首页渔方订单统计
    this.fishPartyOrderStatistics()
    // 首页待处理事务
    this.pendingWorkStatistics()
    // 用户统计
    this.userStatistics()
  },
  methods: {
    setClick(){
      this.$router.push('settingUp/inner/fry')
    },
    wokeClick(){
this.$router.push('workOrder/inner/fishPut')
    },    
    smartClick(){
      this.$router.push('smartFish/index/index')
    },
    userBtn(){
      this.$router.push('userAdministrator/inner/userAdministrator')
    },
    orderBtn() {
      this.$router.push('order/orderList/orderList')
    },
    reservoirBtn() {
      this.$router.push('reservoir/reservoir/addReservoir')
    },
    // 首页渔方订单统计
    async fishPartyOrderStatistics() {
      let result = await fishPartyOrderStatistics()
      if (result.code == 0) {
        this.orderInfo = result.data
      }
    },
    // 首页待处理事务
    async pendingWorkStatistics() {
      let result = await pendingWorkStatistics()
      if (result.code == 0) {
        this.pendingInfo = result.data
      }
    },
    async userStatistics() {
      let result = await userStatistics()
      if (result.code == 0) {
        this.Statistics = result.data.data
      }
    }

  },
  computed: {
    ...mapGetters([
      'name'
    ])
  }
}
</script>
<style lang="scss" scoped>
.homeHeader {
  display: flex;
  align-items: center;
}

.num-box {
  margin-left: 10px;

}

.hoem-text {
  margin: 10px 0;
}

.index-img {
  width: 60px;
  height: 60px;
}

.dasshbo-heard {
  display: flex;
  justify-content: space-around;
}

.num {
  color: #ccc;
}

.dashboard {
  &-container {
    margin: 30px;
    display: flex;
    justify-content: space-around;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

.box-size {
  border: 1px solid #ccc;
  margin: 20px 34px;
  height: 180px;
}

.text-box {
  height: 50px;
  line-height: 50px;
  padding-left: 20px;
  background-color: #f3f3f3;
}

.el-divider--horizontal {
  display: block;
  height: 1px;
  width: 100%;
  margin-top: -10px;
}
</style>
  